<template>
  <el-dialog
    v-model="show"
    :title="seatCode + '颜色设置'"
    width="500px"
    destroy-on-close
    draggable
  >
    <div v-loading="loading">
      <div class="container">
        <el-scrollbar max-height="200px">
          <el-button
            v-for="item in colorList"
            class="color-button"
            :color="item.value"
            size="small"
            :style="{
              transform: `scale(${item.value == colorNew ? 1.25 : 1})`,
            }"
            @click="colorNew = item.value"
          ></el-button>
        </el-scrollbar>
      </div>
      <el-divider />
      <div style="text-align: center" v-if="isChanged">
        <el-button :color="colorNew" @click="save"
          >保存{{ seatCode }}颜色：{{ colorNew }}</el-button
        >
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { h, ref, computed, nextTick, watch, onMounted, onUnmounted } from "vue";
import { ElMessage } from "element-plus";
import dayjs from "dayjs";
import axios from "axios";

import useSeatStore from "@/store/seat.js";
import useCommonStore from "@/store/common.js";
import colorList from "./colorList.json";

const commonStore = useCommonStore();
const seatStore = useSeatStore();

const seatCode = ref("");
const colorOld = ref("");
const colorNew = ref("");

const isChanged = computed(() => colorNew.value != colorOld.value);

const show = ref(false);

const open = (seat) => {
  let color = commonStore.darkMode ? seat.colorDark : seat.colorLight;
  seatCode.value = seat.seatName;
  colorOld.value = color;
  colorNew.value = color;
  show.value = true;
};

const loading = ref(false);

import setSeatAttrib from "@/views/SeatStatus/common/setSeatAttrib.js";
const save = () => {
  loading.value = true;
  setSeatAttrib(
    seatCode.value,
    commonStore.darkMode ? "defaultColor" : "color",
    colorNew.value.replace("#", "%23")
  )
    .then(() => {
      seatStore
        .getSeatStatus()
        .then(() => {
          loading.value = false;
          show.value = false;
        })
        .catch(() => {
          loading.value = false;
          show.value = false;
        });
    })
    .catch(() => {
      loading.value = false;
      show.value = false;
    });
  return null;
};
defineExpose({ open });
</script>

<style scoped>
.color-button {
  margin: 4px !important;
}

.container {
  width: 100%;
  /* height: 410px; */
  overflow: auto;
}
</style>
